<template>
	<div class="container" id="market">
		<div class="container-box">
			<div class="content-box">
				<ul class="nav nav-tabs" id="market-tab" role="tablist">
					<template v-for="(item,$index) in chart_info">
						<li class="nav-item" :class="$index==0?'active':'' ">
							<a class="nav-link" :class="$index==0?'show active':'' " :id="item.document_id+tab" data-toggle="tab" :href="id+item.document_id" role="tab" aria-controls="home" aria-selected="true">{{item.name}}</a>
						</li>
					</template>
				</ul>
				<div class="tab-content" id="myTabContent">
					<template v-for="(item,$index) in chart_info">
						<div class="tab-pane fade" :class="$index==0?'active in show':'' " :id="item.document_id" role="tabpanel" :aria-labelledby="item.document_id+tab">
							<div :id="item.chatrs_id"></div>
						</div>
					</template>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {setLishi} from '../../gloab/setMap.js'
	export default{
		data(){
			return {
				tab: "-tab",
				id: "#",
				chart_info: [
					{
						name: "价格趋势",
						document_id: "chart-price",
						trends_field: "price",
						chatrs_id: "chart-price-id"
					},
					{
						name: "市值趋势",
						document_id: "chart-marketcap",
						trends_field: "marketcap",
						chatrs_id: "chart-marketcap-id"
					},
					{
						name: "市值排名",
						document_id: "chart-marketcap-order",
						trends_field: "marketcap_order",
						chatrs_id: "chart-marketcap-order-id"
					},
					{
						name: "成交量趋势",
						document_id: "chart-vol",
						trends_field: "vol",
						chatrs_id: "chart-vol-id"
					},
					{
						name: "成交易排名",
						document_id: "chart-vol-order",
						trends_field: "vol_order",
						chatrs_id: "chart-vol-order-id"
					},
					{
						name: "换手率趋势",
						document_id: "chart-turnover",
						trends_field: "turnover",
						chatrs_id: "chart-turnover-id"
					}
				]
			}
		},
		mounted: function() {
			let me = this;
			let id = me.$route.params.id;
			
			this.$nextTick(function() {
				setLishi(id, this.chart_info);
// 				for (let item of me.chart_info) {
// 					setLishi(item.chatrs_id, id, item.trends_field);
// 				}
			});
		},
	}
</script>
<style scoped="scoped">
	
</style>